<template>
  <view class="group-buy-page">
    <!-- 商品信息 -->
    <view class="product-info">
      <view class="product-image">
        <image :src="productInfo.image" mode="aspectFill" class="image"></image>
      </view>
      
      <view class="product-details">
        <text class="product-title">{{ productInfo.title }}</text>
        <view class="price-info">
          <text class="current-price">¥{{ productInfo.currentPrice }}</text>
          <text v-if="productInfo.originalPrice" class="original-price">¥{{ productInfo.originalPrice }}</text>
        </view>
        <view class="progress-info">
          <text class="progress-text">{{ productInfo.soldCount }}/{{ productInfo.targetCount }}人已参团</text>
        </view>
      </view>
    </view>

    <!-- 团购信息 -->
    <view class="group-info">
      <view class="info-header">
        <u-icon name="users" size="16" color="#ff4d4f"></u-icon>
        <text class="header-text">团购信息</text>
      </view>
      
      <view class="info-content">
        <view class="info-item">
          <text class="item-label">团购价格</text>
          <text class="item-value price">¥{{ productInfo.currentPrice }}</text>
        </view>
        <view class="info-item">
          <text class="item-label">原价</text>
          <text class="item-value original">¥{{ productInfo.originalPrice }}</text>
        </view>
        <view class="info-item">
          <text class="item-label">节省金额</text>
          <text class="item-value save">¥{{ (productInfo.originalPrice - productInfo.currentPrice).toFixed(2) }}</text>
        </view>
        <view class="info-item">
          <text class="item-label">成团人数</text>
          <text class="item-value">{{ productInfo.targetCount }}人</text>
        </view>
        <view class="info-item">
          <text class="item-label">已参团人数</text>
          <text class="item-value">{{ productInfo.soldCount }}人</text>
        </view>
        <view class="info-item">
          <text class="item-label">剩余时间</text>
          <text class="item-value time">{{ remainingTime }}</text>
        </view>
      </view>
    </view>

    <!-- 购买数量 -->
    <view class="quantity-section">
      <view class="section-header">
        <u-icon name="shopping-cart" size="16" color="#ff4d4f"></u-icon>
        <text class="header-text">购买数量</text>
      </view>
      
      <view class="quantity-content">
        <view class="quantity-control">
          <view class="quantity-btn" @click="handleQuantityChange(-1)">
            <u-icon name="minus" size="16" color="#999"></u-icon>
          </view>
          <view class="quantity-input">
            <text class="quantity-text">{{ formData.quantity }}</text>
          </view>
          <view class="quantity-btn" @click="handleQuantityChange(1)">
            <u-icon name="plus" size="16" color="#ff4d4f"></u-icon>
          </view>
        </view>
        
        <view class="quantity-tips">
          <text class="tips-text">限购{{ productInfo.maxQuantity }}件</text>
        </view>
      </view>
    </view>

    <!-- 收货信息 -->
    <view class="delivery-section">
      <view class="section-header">
        <u-icon name="map-pin" size="16" color="#ff4d4f"></u-icon>
        <text class="header-text">收货信息</text>
      </view>
      
      <view class="delivery-content">
        <view class="form-item">
          <text class="form-label">收货人 <text class="required">*</text></text>
          <u-input 
            v-model="formData.receiverName"
            placeholder="请输入收货人姓名"
            :border="false"
            bg-color="#f8f9fa"
          ></u-input>
        </view>
        
        <view class="form-item">
          <text class="form-label">联系电话 <text class="required">*</text></text>
          <u-input 
            v-model="formData.receiverPhone"
            placeholder="请输入联系电话"
            type="number"
            :border="false"
            bg-color="#f8f9fa"
          ></u-input>
        </view>
        
        <view class="form-item">
          <text class="form-label">收货地址 <text class="required">*</text></text>
          <u-textarea 
            v-model="formData.receiverAddress"
            placeholder="请输入详细收货地址"
            :maxlength="200"
            :count="true"
            :border="false"
            bg-color="#f8f9fa"
          ></u-textarea>
        </view>
      </view>
    </view>

    <!-- 支付方式 -->
    <view class="payment-section">
      <view class="section-header">
        <u-icon name="wallet" size="16" color="#ff4d4f"></u-icon>
        <text class="header-text">支付方式</text>
      </view>
      
      <view class="payment-content">
        <view 
          v-for="(method, index) in paymentMethods" 
          :key="index"
          class="payment-item"
          :class="{ active: formData.paymentMethod === method.value }"
          @click="handlePaymentMethodChange(method.value)"
        >
          <view class="payment-icon">
            <u-icon :name="method.icon" size="20" :color="method.color"></u-icon>
          </view>
          <text class="payment-text">{{ method.label }}</text>
          <view class="payment-radio">
            <u-radio 
              :value="formData.paymentMethod === method.value"
              active-color="#ff4d4f"
            ></u-radio>
          </view>
        </view>
      </view>
    </view>

    <!-- 订单备注 -->
    <view class="remark-section">
      <view class="section-header">
        <u-icon name="edit" size="16" color="#ff4d4f"></u-icon>
        <text class="header-text">订单备注</text>
      </view>
      
      <view class="remark-content">
        <u-textarea 
          v-model="formData.remark"
          placeholder="请输入订单备注（选填）"
          :maxlength="100"
          :count="true"
          :border="false"
          bg-color="#f8f9fa"
        ></u-textarea>
      </view>
    </view>

    <!-- 协议确认 -->
    <view class="agreement-section">
      <view class="agreement-content">
        <view class="agreement-item">
          <u-checkbox 
            v-model="formData.agreeTerms"
            active-color="#ff4d4f"
          ></u-checkbox>
          <text class="agreement-text">我已阅读并同意<text class="link-text" @click="handleViewTerms">《团购服务协议》</text></text>
        </view>
        
        <view class="agreement-item">
          <u-checkbox 
            v-model="formData.agreePrivacy"
            active-color="#ff4d4f"
          ></u-checkbox>
          <text class="agreement-text">我已阅读并同意<text class="link-text" @click="handleViewPrivacy">《隐私政策》</text></text>
        </view>
      </view>
    </view>

    <!-- 底部操作栏 -->
    <view class="bottom-actions">
      <view class="price-summary">
        <view class="summary-item">
          <text class="summary-label">商品总价</text>
          <text class="summary-value">¥{{ (productInfo.currentPrice * formData.quantity).toFixed(2) }}</text>
        </view>
        <view class="summary-item">
          <text class="summary-label">运费</text>
          <text class="summary-value">¥0.00</text>
        </view>
        <view class="summary-item total">
          <text class="summary-label">应付总额</text>
          <text class="summary-value">¥{{ (productInfo.currentPrice * formData.quantity).toFixed(2) }}</text>
        </view>
      </view>
      
      <view class="submit-btn" @click="handleSubmit">
        <text class="btn-text">立即参团</text>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, onUnmounted } from 'vue'

// 商品信息
const productInfo = reactive({
  id: 1,
  title: '新鲜有机蔬菜套餐',
  currentPrice: 29.9,
  originalPrice: 39.9,
  soldCount: 45,
  targetCount: 100,
  maxQuantity: 5,
  image: 'https://example.com/images/vegetables.jpg'
})

// 表单数据
const formData = reactive({
  quantity: 1,
  receiverName: '',
  receiverPhone: '',
  receiverAddress: '',
  paymentMethod: 'wechat',
  remark: '',
  agreeTerms: false,
  agreePrivacy: false
})

// 支付方式
const paymentMethods = reactive([
  { label: '微信支付', value: 'wechat', icon: 'wechat', color: '#07c160' },
  { label: '支付宝', value: 'alipay', icon: 'alipay', color: '#1677ff' },
  { label: '银行卡', value: 'bank', icon: 'credit-card', color: '#ff4d4f' }
])

// 剩余时间
const remainingTime = ref('23:45:12')
let timer: any = null

// 数量变化
const handleQuantityChange = (delta: number) => {
  const newQuantity = formData.quantity + delta
  if (newQuantity >= 1 && newQuantity <= productInfo.maxQuantity) {
    formData.quantity = newQuantity
  }
}

// 支付方式选择
const handlePaymentMethodChange = (value: string) => {
  formData.paymentMethod = value
}


// 查看协议
const handleViewTerms = () => {
  uni.navigateTo({
    url: '/pages/common/terms'
  })
}

// 查看隐私政策
const handleViewPrivacy = () => {
  uni.navigateTo({
    url: '/pages/common/privacy'
  })
}

// 表单验证
const validateForm = () => {
  if (!formData.receiverName.trim()) {
    uni.showToast({
      title: '请输入收货人姓名',
      icon: 'none'
    })
    return false
  }
  
  if (!formData.receiverPhone.trim()) {
    uni.showToast({
      title: '请输入联系电话',
      icon: 'none'
    })
    return false
  }
  
  if (!/^1[3-9]\d{9}$/.test(formData.receiverPhone)) {
    uni.showToast({
      title: '请输入正确的手机号',
      icon: 'none'
    })
    return false
  }
  
  if (!formData.receiverAddress.trim()) {
    uni.showToast({
      title: '请输入收货地址',
      icon: 'none'
    })
    return false
  }
  
  if (!formData.agreeTerms) {
    uni.showToast({
      title: '请同意团购服务协议',
      icon: 'none'
    })
    return false
  }
  
  if (!formData.agreePrivacy) {
    uni.showToast({
      title: '请同意隐私政策',
      icon: 'none'
    })
    return false
  }
  
  return true
}

// 提交订单
const handleSubmit = () => {
  if (!validateForm()) {
    return
  }
  
  uni.showLoading({
    title: '提交中...'
  })
  
  // 模拟提交
  setTimeout(() => {
    uni.hideLoading()
    uni.showToast({
      title: '参团成功',
      icon: 'success'
    })
    
    // 跳转到支付页面
    setTimeout(() => {
      uni.navigateTo({
        url: `/pages/community-group-buying/payment?orderId=12345`
      })
    }, 1500)
  }, 2000)
}

// 倒计时更新
const updateCountdown = () => {
  // 这里实现倒计时逻辑
  // 模拟倒计时
  const now = new Date()
  const endTime = new Date(now.getTime() + 24 * 60 * 60 * 1000) // 24小时后
  const diff = endTime.getTime() - now.getTime()
  
  if (diff > 0) {
    const hours = Math.floor(diff / (1000 * 60 * 60))
    const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60))
    const seconds = Math.floor((diff % (1000 * 60)) / 1000)
    
    remainingTime.value = `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`
  } else {
    remainingTime.value = '00:00:00'
  }
}

// 页面加载
onMounted(() => {
  console.log('参团购买页面加载完成')
  
  // 启动倒计时
  timer = setInterval(updateCountdown, 1000)
  updateCountdown()
})

// 页面卸载
onUnmounted(() => {
  if (timer) {
    clearInterval(timer)
  }
})
</script>

<style lang="scss" scoped>
.group-buy-page {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: 200rpx;
}


.product-info {
  background-color: #fff;
  padding: 30rpx;
  margin-bottom: 20rpx;
  display: flex;
  gap: 20rpx;
  
  .product-image {
    width: 120rpx;
    height: 120rpx;
    border-radius: 12rpx;
    overflow: hidden;
    flex-shrink: 0;
    
    .image {
      width: 100%;
      height: 100%;
    }
  }
  
  .product-details {
    flex: 1;
    
    .product-title {
      display: block;
      font-size: 28rpx;
      font-weight: 600;
      color: #333;
      line-height: 1.4;
      margin-bottom: 12rpx;
    }
    
    .price-info {
      display: flex;
      align-items: center;
      gap: 12rpx;
      margin-bottom: 8rpx;
      
      .current-price {
        font-size: 32rpx;
        font-weight: 600;
        color: #ff4d4f;
      }
      
      .original-price {
        font-size: 24rpx;
        color: #999;
        text-decoration: line-through;
      }
    }
    
    .progress-info {
      .progress-text {
        font-size: 24rpx;
        color: #999;
      }
    }
  }
}

.group-info,
.quantity-section,
.delivery-section,
.payment-section,
.remark-section {
  background-color: #fff;
  margin-bottom: 20rpx;
  
  .section-header {
    display: flex;
    align-items: center;
    gap: 12rpx;
    padding: 30rpx 30rpx 20rpx;
    border-bottom: 1rpx solid #f0f0f0;
    
    .header-text {
      font-size: 30rpx;
      font-weight: 600;
      color: #333;
    }
  }
  
  .info-content {
    padding: 30rpx;
    
    .info-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20rpx;
      
      &:last-child {
        margin-bottom: 0;
      }
      
      .item-label {
        font-size: 28rpx;
        color: #666;
      }
      
      .item-value {
        font-size: 28rpx;
        color: #333;
        font-weight: 500;
        
        &.price {
          color: #ff4d4f;
        }
        
        &.original {
          color: #999;
          text-decoration: line-through;
        }
        
        &.save {
          color: #52c41a;
        }
        
        &.time {
          color: #ff4d4f;
        }
      }
    }
  }
  
  .quantity-content {
    padding: 30rpx;
    
    .quantity-control {
      display: flex;
      align-items: center;
      gap: 20rpx;
      margin-bottom: 16rpx;
      
      .quantity-btn {
        width: 60rpx;
        height: 60rpx;
        border: 2rpx solid #d9d9d9;
        border-radius: 8rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s ease;
        
        &:active {
          background-color: #f5f5f5;
        }
      }
      
      .quantity-input {
        width: 100rpx;
        height: 60rpx;
        border: 2rpx solid #d9d9d9;
        border-radius: 8rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        
        .quantity-text {
          font-size: 28rpx;
          color: #333;
          font-weight: 500;
        }
      }
    }
    
    .quantity-tips {
      .tips-text {
        font-size: 24rpx;
        color: #999;
      }
    }
  }
  
  .delivery-content {
    padding: 30rpx;
    
    .form-item {
      margin-bottom: 30rpx;
      
      &:last-child {
        margin-bottom: 0;
      }
      
      .form-label {
        display: block;
        font-size: 28rpx;
        color: #333;
        margin-bottom: 16rpx;
        
        .required {
          color: #ff4d4f;
        }
      }
    }
  }
  
  .payment-content {
    padding: 30rpx;
    
    .payment-item {
      display: flex;
      align-items: center;
      gap: 20rpx;
      padding: 20rpx;
      border: 2rpx solid #f0f0f0;
      border-radius: 12rpx;
      margin-bottom: 16rpx;
      transition: all 0.3s ease;
      
      &:last-child {
        margin-bottom: 0;
      }
      
      &.active {
        border-color: #ff4d4f;
        background-color: #fff2f0;
      }
      
      .payment-icon {
        width: 40rpx;
        height: 40rpx;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      
      .payment-text {
        flex: 1;
        font-size: 28rpx;
        color: #333;
      }
      
      .payment-radio {
        width: 40rpx;
        height: 40rpx;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }
  
  .remark-content {
    padding: 30rpx;
  }
}

.agreement-section {
  background-color: #fff;
  margin-bottom: 20rpx;
  
  .agreement-content {
    padding: 30rpx;
    
    .agreement-item {
      display: flex;
      align-items: flex-start;
      gap: 16rpx;
      margin-bottom: 20rpx;
      
      &:last-child {
        margin-bottom: 0;
      }
      
      .agreement-text {
        flex: 1;
        font-size: 26rpx;
        color: #666;
        line-height: 1.5;
        
        .link-text {
          color: #ff4d4f;
          text-decoration: underline;
        }
      }
    }
  }
}

.bottom-actions {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  padding: 20rpx 30rpx;
  border-top: 1rpx solid #f0f0f0;
  
  .price-summary {
    margin-bottom: 20rpx;
    
    .summary-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 8rpx;
      
      &:last-child {
        margin-bottom: 0;
      }
      
      &.total {
        border-top: 1rpx solid #f0f0f0;
        padding-top: 12rpx;
        margin-top: 12rpx;
        
        .summary-label,
        .summary-value {
          font-size: 32rpx;
          font-weight: 600;
          color: #ff4d4f;
        }
      }
      
      .summary-label {
        font-size: 28rpx;
        color: #666;
      }
      
      .summary-value {
        font-size: 28rpx;
        color: #333;
        font-weight: 500;
      }
    }
  }
  
  .submit-btn {
    width: 100%;
    padding: 24rpx;
    background-color: #ff4d4f;
    border-radius: 12rpx;
    text-align: center;
    transition: all 0.3s ease;
    
    &:active {
      background-color: #d9363e;
    }
    
    .btn-text {
      font-size: 32rpx;
      font-weight: 600;
      color: #fff;
    }
  }
}
</style>
